<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>扇形图例制作</title>
	</head>
	<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 600px;
				height: 500px;
				border: 1px solid blue;
			}
		</style>
			<body>
		<div id="answer"></div>
		<div class="container">
			<canvas id="canvas" width="600" height="500"></canvas>
		</div>
	</body>
	<script type="text/javascript">
				window.onload=function() {
				let ocan=document.getElementById('canvas');
				let open=ocan.getContext('2d');
				let data=[ 
				{value: 370, color:"green", name:'第一季度'},
				{value: 460, color:'blue', name:'第二季度'},
				{value: 570, color:'red', name:'第三季度'},
				{value: 630, color:'purple', name:'第四季度'}];
				
				createSector(open, 200, 150, 100, data);
				createName(open, 450, 50, data);
				function createSector(oPen, x, y, r, data) {
					let sum=0;
					for(var i=0;i<data.length;i++) {
						sum+=data[i].value;
					}
					for(var i=0;i<data.length;i++) {
						data[i].percentage=(data[i].value*1.0)/sum*360;
					}
					let startAngle=0;
					for(var i=0;i<data.length;i++) {
						oPen.beginPath();
						oPen.moveTo(x, y);
						oPen.arc(x, y, r, startAngle, startAngle+(Math.PI/180)*data[i].percentage, false);
						startAngle+=(Math.PI/180)*data[i].percentage;
						oPen.fillStyle=data[i].color;
						oPen.fill();
					}
				}
				function createName(oPen, x, y, data) {
					oPen.font='bold  20px 微软雅黑';
					for(var i=0;
					i<data.length;
					i++) {
						name=data[i].name+'  '+data[i].value;
						oPen.fillStyle=data[i].color;
						oPen.fillText(name, x, y);
						y+=40;
					}
				}
			}
			
			</script>
			</html>